<template>
	<z-paging ref="paging">
		<view class="relative">
			<view style="z-index:0;position:absolute;left:-17px;right:-17px;top:-17px;bottom:-17px;height:240px;">
				<image class="w-full h-full" mode="aspectFill" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg_point_header.png"></image>
			</view>
			<uni-nav-bar ref="navBar" fixed statusBar title="" :border="false" backgroundColor="transparent" @clickLeft="goBack">
				<template v-slot:left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
			</uni-nav-bar>
			<view class="px-16" style="position:absolute;top:100px;width:100%;">
				<view class="flex item-center justify-between fs-14 c3" @click="toHomePage">
					<view class="flex item-center">
						<image :src="detail.logo" class="img-avatar mr-4"></image>
						<view>{{detail.businessShortName}}</view>
					</view>
				</view>
				<view class="mt-20 color-primary">
					<view class="fs-40 font-bold" @click="toPointDetail">{{detail.remainPoint}}<text class="fs-20">></text></view>
					<view class="fs-12 c3 flex item-center">
						<image src="../static/icon-star.svg" class="size-16 mr-4"></image>
						<view>当前积分</view>
					</view>
				</view>
			</view>
			<view class="bg-default" style="position:absolute;top:220px;width:100%;">
				<view class="h-16 bg-default flex-shrink"></view>
				<view class="bg-white p-16 mb-16">
					<view class="base-title mb-16">获得更多积分</view>
					<view v-if="detail.firstSubscription" class="fs-14 c3 flex justify-between item-center mb-8">
						<view>首次订阅策划人 得<text class="color-primary">{{detail.firstSubscription}}积分</text></view>
						<view v-if="detail.subscribeState === 1" class="share-btn" @click="subscribe">立即订阅</view>
						<view v-else class="share-btn subscribe">已订阅</view>
					</view>
					<view v-if="detail.consume" class="fs-14 c3 flex justify-between item-center mb-8">
						<view>下单每消费1元 得<text class="color-primary">{{detail.consume}}积分</text></view>
						<view class="share-btn" @click="toHomePage">去下单</view>
					</view>
					<view v-if="detail.shareActive" class="fs-14 c3 flex justify-between item-center mb-8">
						<view>转发活动1次 得<text class="color-primary">{{detail.shareActive}}积分</text>，每日<text class="color-primary">{{detail.shareDailyLimit}}</text>次</view>
						<view class="share-btn" @click="toHomePage">去转发</view>
					</view>
					<view v-if="detail.distribution" class="fs-14 c3 flex justify-between item-center">
						<view>推广活动，每获得1元佣金 得<text class="color-primary">{{detail.distribution}}积分</text></view>
						<view class="share-btn" @click="toHomePage">去推广</view>
					</view>
				</view>
				<view class="p-16 flex-col bg-white">
					<view class="flex item-center justify-between">
						<view class="base-title">积分兑换奖励</view>
						<view class="flex item-center text-color-hint fs-12" @click="toPrizes">
							<view>我的奖品</view>
							<image class="w-16 h-17 ml-4" src="@/static/svg/icon-arrow-right.svg"></image>
						</view>
					</view>
					<view class="flex-col">
						<view v-if="dataList && dataList.length" class="flex flex-wrap justify-between">
							<template v-for="(item,i) in dataList" :key="i">
								<view class="mt-16 product-item" @click="toDetail(item)">
									<view v-if="item.productType === 1" class="img-wrapper">
										<view class="fs-20 text-white pt-60 text-center"><text class="font-bold">{{item.amount}}</text>元</view>
									</view>
									<image v-else :src="firstImage(item.goodsImages)" mode="" class="img-product"></image>
									<view class="flex-col px-16 py-8 content justify-between">
										<view class="fs-16 font-bold mb-4 two-lines-ellipsis">{{item.goodsName}}</view>
										<view>
											<view class="flex item-center justify-between c3 fs-12">
												<view class="color-primary fs-14 font-bold">{{item.requiredPoints}}积分</view>
												<view class="text-color-hint">已兑{{item.usedNum}}份</view>
											</view>
											<view v-if="detail.remainPoint >= item.requiredPoints" class="submit-btn mt-12" @click.stop="showPop(true, item)">兑换</view>
											<view v-else class="submit-btn mt-12 disabled">积分不足</view>
										</view>
									</view>
								</view>
							</template>
						</view>
						<view v-else class="py-50 bg-default">
							<view v-if="!loading" class="flex-col center h-full">
								<text class="mt-4 fs-12 text-color-regular font-normal text-center">暂无数据</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<template #bottom>
			<view :style="`height:${safeAreaBottom}px;`"></view>
		</template>
	</z-paging>
	<uni-popup :is-mask-click="false" ref="popup" type="center">
		<view>
			<view class="w-pop" style="background: #ffffff;">
				<view class="base-title text-center">积分兑换</view>
				<view class="mt-8 text-center mb-20">消耗<text class="color-primary">{{currentData.requiredPoints}}积分</text>兑换</view>
				<view v-if="currentData.productType === 1" class="coupon-item flex justify-between item-center px-6 py-14">
					<view class="left flex-col color-primary">
						<view class="fs-20 text-center font-bold"><text class="fs-16 font-light">¥</text>{{ currentData.amount }}</view>
					</view>
					<view class="right ml-12 flex justify-between item-center">
						<view class="flex-col fs-12 text-color-hint">
							<view class="fs-16 font-bold c3">{{ currentData.goodsName }}</view>
							<view>仅限该商家活动使用</view>
							<view>兑换后{{currentData.dayLimit}}天内有效</view>
						</view>
					</view>
				</view>
				<view v-else class="goods-item flex item-center">
					<image v-if="currentData.goodsImages" :src="firstImage(currentData.goodsImages)"></image>
					<view class="flex py-10 px-12 c3 fs-14">
						<view class="two-lines-ellipsis">{{currentData.goodsName}}</view>
					</view>
				</view>
				<view class="flex item-center btn-box">
					<view class="submit-btn" @click="submit">确认兑换</view>
				</view>
			</view>
		</view>
		<view class="mt-20 flex justify-center">
			<image class="size-44" src="@/static/svg/icon-close.svg" @click.stop="showPop(false)"></image>
		</view>
	</uni-popup>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import {computed,ref,unref,watch} from 'vue'
	import { getProductListApi, exchangeApi, getHomePageApi } from '@/pagesF/api/index.js'
	import { businessSubscribeUpdateStateApi } from '@/api/business.js'
	import {isVideoFile} from '@/utils/index.js'
	import { useUserStore } from '@/stores/modules/user.js'
	const userStore = useUserStore()
	
	const navBar = ref(null)
	const showAll = ref(false)
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets && uni.getSystemInfoSync().safeAreaInsets.bottom || 0
	})
	const goBack = () => {
		if(getCurrentPages().length === 1) {
			uni.reLaunch({
				url: '/pages/home/home'
			})
			return
		}
		uni.navigateBack()
	}
	
	const queryParams = ref({
		businessId: ''
	})
	const dataList = ref([])
	const loading = ref(true)
	const queryList = () => {
		loading.value = true
		getProductListApi(unref(queryParams)).then(res => {
			dataList.value = res
		}).finally(() => {
			loading.value = false
		})
	}
	const firstImage = (list) => {
		return list.find(item => !isVideoFile(item))
	}
	const currentData = ref({})
	const popup = ref()
	const detail = ref({})
	const isNumber = (val) => {
	    var regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
	    if(regPos.test(val) ){
	        return true;
	    }else{
	        return false;
	    }
	}
	const changePoint = (e) => {
		if(!isNumber(e.detail.value)){
			uni.showToast({
				icon: 'none',
				title: '只能输入数字'
			})
			points.value = ''
		}
	}
	const subscribe = () => {
		businessSubscribeUpdateStateApi({
			businessId: queryParams.value.businessId,
			subscribeState: 1, // 订阅状态：1-订阅，2-取消订阅
		}).then(res => {
			if (res > 0) {
				uni.showToast({
					icon: 'none',
					title: `订阅成功，积分+${res}`
				})
			}else{
				uni.showToast({
					icon: 'none',
					title: `订阅成功`
				})
			}
			getHomePage()
			queryList()
		})
	}
	const showPop = async (value, data) => {
		if (value) {
			currentData.value = data
			popup.value && popup.value.open('center')
		} else {
			popup.value && popup.value.close()
		}
	}
	const submit = async () => {
		exchangeApi({id: currentData.value.id}).then(res => {
			uni.showToast({
				icon: 'none',
				title: '兑换成功'
			})
			showPop(false)
			getHomePage()
			queryList()
		})
	}
	const getHomePage = () => {
		getHomePageApi({id: queryParams.value.businessId}).then(res => {
			detail.value = res
			if(res.pointsMallState !== 1) {
				uni.showModal({
					title: '商家暂停了积分商城',
					content: '暂停期间不累计积分，不可兑换奖品已兑换的奖品可以正常使用。团长重新开启后，所有功能将会恢复',
					showCancel: false,
					confirmColor: '#FA4543',
					success: (res) => {
						if (res.confirm) {
							toHomePage()
						}
					}
				})
			}
		})
	}
	const toHomePage = () => {
		uni.reLaunch({
			url: `/pagesA/merchant/homepage?id=${queryParams.value.businessId}`,
		})
	}
	const toPrizes = () => {
		uni.navigateTo({
			url: `/pagesF/merchantMall/prizes?id=${queryParams.value.businessId}`,
		})
	}
	const toPointDetail = () => {
		uni.navigateTo({
			url: `/pagesJ/integralSetting/pointDetail?id=${userStore.userInfo.id}&businessId=${queryParams.value.businessId}`,
		})
	}
	const toDetail = (item) => {
		if(item.productType === 2){
			uni.navigateTo({
				url: `/pagesF/merchantMall/detail?id=${item.id}`,
			})
		}
	}
	onLoad((query) => {
		queryParams.value.businessId = query.id
		getHomePage()
		queryList()
	})
</script>
<style scoped lang="scss">
	.product-item{
		width: 165px;
		.img-wrapper{
			width: 165px;
			height: 165px;
			background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-couponItem.png");
			background-repeat: no-repeat;
			background-size: 100%;
		}
		.content{
			height: 121px;
			background: #F5F4F6;
			border-radius: 0px 0px 8px 8px;
		}
	}
	.img-avatar{
		width: 24px;
		height: 24px;
		border-radius: 50%;
	}
	.img-product{
		width: 165px;
		height: 165px;
		border-radius: 8px 8px 0px 0px;
	}
	.coupon-item{
		background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-coupon2.png");
		background-repeat: no-repeat;
		background-size: 100%;
		.left{
			width: 68px;
		}
		.right{
			width: 163px;
		}
	}
	.goods-item{
		image{
			width: 80px;
			height: 80px;
			border-radius: 8px 0px 0px 8px;
			flex-shrink: 0;
		}
		border-radius: 12px 12px 12px 12px;
		background: #FFF0EA;
	}
	.two-lines-ellipsis {
		width: 135px;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.w-pop {
		background: #fffff;
		border-radius: 8px;
		padding: 16px;
		width: 280px;
	}
	.base-title {
		font-size: 20px;
		font-weight: 600;
	}
	
	.item-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 20px;
	}
	
	.label-box {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		margin: 6px 0;
	}
	
	.inp-box {
		background: rgba(245, 245, 245, 1);
		height: 32px;
		border-radius: 12px;
		padding: 0 10px;
		line-height: 32px;
		border: 1px solid rgba(245, 245, 245, 1);
		width: 100px;
		&.unactive {
			border-color: #FA4543;
		}
	}
	
	.btn-box {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		line-height: 30px;
	}
	
	.cancal-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
		border-right: 1px solid rgba(0, 0, 0, 0.1);
	}
	
	.submit-btn {
		width: 100%;
		font-family: PingFang SC;
		font-size: 12px;
		text-align: center;
		color: #fff;
		background: #FA4543;
		border-radius: 4px;
		padding: 6px 0;
		&.disabled{
			color: #FA4543;
			background: #fff;
		}
	}
	.share-btn{
		width: 64px;
		height: 25px;
		line-height: 23px;
		font-size: 12px;
		border-radius: 8px;
		background: #FA4543;
		color: #ffffff;
		text-align: center;
		&.subscribe{
			color: #FA4543;
			border: 1px solid #FA4543;
			background: none;
		}
	}
</style>